<%@ page import="com.one.product.model.Product" %><%--
  Created by IntelliJ IDEA.
  User: 13689
  Date: 2024/12/2
  Time: 上午8:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            height: 100vh;
            /* 使容器的高度占满视口 */
            margin: 0;
            /* 去掉默认边距 */
            flex-direction: column;
            /* 纵向排列 */
        }

        .seller-container {
            width: 60%;
            height: 4%;

            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            /* 使内容垂直居中 */
            overflow: auto;
            border-radius: 15px;
            /* 设置圆角处理 */
            margin-bottom: 20px;
            /* 商家信息与商品详情之间的间距 */
        }
        .seller-container, .container {
            height: auto;
        }
        .container {
            width: 60%;
            height: 50%;
            /* 设置容器宽度为60% */
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            /* 使内容垂直居中 */
            overflow: auto;
            border-radius: 15px;
            /* 设置圆角处理 */
            margin-bottom: 20px;
            /* 商家信息与商品详情之间的间距 */
        }

        .seller-info {
            display: flex;
            align-items: center;
            width: 100%;
            /* 使商家信息模块占据整个宽度 */
        }

        .seller-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* 头像圆角处理 */
            margin-right: 10px;
            /* 头像与商家名称之间的间距 */
        }

        .seller-details {
            display: flex;
            flex-direction: column;
        }

        .seller-name {
            font-size: 18px;
            font-weight: bold;
        }

        .seller-rating {
            color: #f39c12;
            font-size: 14px;
        }

        .seller-actions {
            margin-left: auto;
            /* 将操作按钮推到右侧 */
            display: flex;
            align-items: center;
        }

        .seller-action-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            border-radius: 5px;
            /* 按钮圆角处理 */
            margin-left: 10px;
            /* 操作按钮之间的间距 */
            transition: background-color 0.3s, transform 0.1s;
            /* 添加过渡效果 */
        }

        .seller-action-button:hover {
            background-color: #555;
            /* 鼠标经过时颜色变化 */
        }

        .seller-action-button:active {
            background-color: #777;
            /* 点击时颜色变化 */
            transform: scale(0.95);
            /* 点击时缩小效果 */
        }

        .product-image {
            width: 50%;
            /* 商品图片占容器的一半宽度 */
            height: auto;
        }

        .product-info {
            margin-left: 20px;
            flex: 1;
            /* 允许商品信息占据剩余空间 */
            display: flex;
            /* 使用flexbox来垂直居中内容 */
            flex-direction: column;
            /* 纵向排列 */
            justify-content: center;
            /* 垂直居中对齐 */
        }

        .price {
            font-size: 24px;
            color: #e74c3c;
        }

        .old-price {
            text-decoration: line-through;
            color: #777;
        }

        .action-buttons {
            margin-top: 20px;
            /* 增加顶部间距 */
            display: flex;
            /* 水平排列 */
            justify-content: flex-start;
            /* 左对齐 */
        }

        .action-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            border-radius: 5px;
            /* 按钮圆角处理 */
            margin-right: 10px;
            /* 添加右边距 */
            transition: background-color 0.3s;
            /* 添加过渡效果 */
        }

        .action-button:hover {
            background-color: #555;
            /* 鼠标经过时颜色变化 */
        }

        .action-button:active {
            background-color: #777;
            /* 点击时颜色变化 */
        }

        .favorite-button {
            margin-left: 20px;
            /* 与其他按钮之间的左边距 */
            background-color: #fff;
            /* 初始颜色为白色 */
            color: #e74c3c;
            /* 文字颜色为橙色 */
            border: 2px solid #e74c3c;
            /* 添加边框 */
        }

        .favorite-button.active {
            background-color: #e74c3c;
            /* 点击后颜色变为橙色 */
            color: #fff;
            /* 文字颜色变为白色 */
        }
    </style>
</head>
<body>
<!-- 商家信息模块 -->
<div class="seller-container">
    <div class="seller-info">
        <img src="./picture/bjImages/yhtx.png" alt="商家头像" class="seller-avatar">
        <div class="seller-details">
            <div class="seller-name">臭卖鞋的小店</div>
            <div class="seller-rating">★★★★☆</div>
        </div>
        <div class="seller-actions">
            <a href="#" class="seller-action-button">联系客服</a>
            <a href="#" class="seller-action-button">进入商店</a>
        </div>
    </div>
</div>

<!-- 商品详情模块 -->
<div class="container" id="app">
    <img src="picture/productImages/<%=((Product)(request.getAttribute("product"))).getPicture()%>" alt="商品图片" class="product-image">
    <div class="product-info">
        <h1><%=((Product)(request.getAttribute("product"))).getName()%></h1>
        <p class="old-price">原价: <%=((Product)(request.getAttribute("product"))).getMarket_price()%></p>
        <p class="price">现价: ￥<%=((Product)(request.getAttribute("product"))).getSell_price()%></p>
        <p class="description"><%=((Product)(request.getAttribute("product"))).getDescription()%></p>
        <div class="action-buttons">
            <a href='addCar.do?number=1&productId=<%=((Product)(request.getAttribute("product"))).getId()%>' class="action-button">立即购买</a>
            <a href='addCar.do?number=1&productId=<%=((Product)(request.getAttribute("product"))).getId()%>' class="action-button">加入购物车</a>
            <button class="['action-button', 'favorite-button', { active: isFavorite }]"
                    @click="toggleFavorite">收藏</button> <!-- 收藏按钮 -->
        </div>
    </div>
</div>

<script src="js/vue-2.6.10.js"></script>
<script src="js/axios.min.js"></script>

</body>
</html>
